import { useState, useEffect } from "react";
import { Image, View, StyleSheet } from "react-native";
import getDeviceInfo, { type DeviceInfoType } from "@/utils/getDeviceInfo";
import config from "@/config";

// 垫片
const PolyfillImg = () => {
  const [deviceInfo, setDeviceInfo] = useState<DeviceInfoType>();

  useEffect(() => {
    getDeviceInfo().then(_deviceInfo => {
      console.log("设备信息: ", _deviceInfo);
      setDeviceInfo(_deviceInfo);
    });
  }, []);

  if (deviceInfo) {
    if (deviceInfo.isLandscape) {
      return <Image {...config.polyfillInfo.landscape} />;
    } else {
      return <Image {...config.polyfillInfo.portrait} />;
    }
  } else {
    return <View style={[StyleSheet.absoluteFill, { backgroundColor: "#000" }]}></View>;
  }
};

export default PolyfillImg;
